<template>
    <div>
        <h1>这是 App 组件</h1>

        <!-- 为什么这里叫做 mt-button 的 button 直接就能用？ -->
        <mt-button type="danger" @click="show">default</mt-button><br>
        <mt-button size="small" disabled>disabled</mt-button><br>
        <!-- <mt-button plain>plain</mt-button><br>
        <mt-button icon="back">back</mt-button><br> -->

        <mt-button>12345</mt-button>

        <button type="button" class="mui-btn mui-btn-royal">
            紫色
        </button>

        <router-link to="/account">Account</router-link><br>
        <router-link to="/goodslist">Goodslist</router-link><br>

        <router-view></router-view>
    </div>
</template>

<script>
    // 按需导入 Toast 组件
    import { Toast } from 'mint-ui';

    export default {
        data() {
            return {
                toastInstance: null
            }
        },
        created() {  // 当组件一被创建，立即调用 getList()
            this.getList()
        },
        methods: {
            getList() {  // 这是模拟获取列表的一个 Ajax 方法
                // 在获取数据之前，立即弹出 Toast 提示用户，正在加载数据
                this.show();
                setTimeout(() => {
                    // 当 3秒 过后，数据获取回来了，要把 Toast 移除
                    this.toastInstance.close()
                }, 3000);
            },
            show() {
                this.toastInstance = Toast({
                    message: '这是消息',
                    position: 'top',
                    duration: -1,
                    // 这是设置图标的类
                    iconClass: 'glyphicon glyphicon-heart',
                    // 自定义Toast的样式，需要自己提供一个类名
                    className: 'mytoast'
                });
            }
        }
    }
</script>

<style>

</style>